<template>
  <div id="app">
    <tabbar>
    <!-- Bug：点击其他tab后刷新，仍然高亮第一个 -->
      <tabbar-item selected link="/order" @on-item-click="getIndex" show-dot> <!-- 只有有图标的tab-item，加上show-dot才有效 -->
          <span slot="label">订单</span>
          <img slot="icon" src="http://tva1.sinaimg.cn/crop.0.1.178.178.180/835c9af2gw1e8bqfmdv5xj205005074r.jpg">
          <img src="http://tva2.sinaimg.cn/crop.0.0.512.512.180/9e5389bbjw8eylgqjhrzsj20e80e8jrw.jpg" slot="icon-active">
      </tabbar-item>
      <tabbar-item link="/group" @on-item-click="getIndex">
        <span slot="label">Group</span>
      </tabbar-item>
      <tabbar-item link="/month" @on-item-click="getIndex">
        <span slot="label">账号</span>
      </tabbar-item>
    </tabbar>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem, Tab, TabItem } from 'vux'
  export default {
    name: 'app',
    data() {
        return{
            index: 0
        }
    },
    components: {
      Tabbar,
      TabbarItem,
      Tab,
      TabItem
    },
    methods: {
        getIndex(index) {
            console.log('index:',index);
        }
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
</style>
<style scoped>
  .weui-tabbar__icon img{
    border-radius: 50%;
  }
</style>
